<template>
  <basic-container>
    <!--    筛选条件-->
<!--    <el-form v-model="StatusSelection">-->
<!--      <el-form-item label="充值状态" >-->
<!--        <el-select v-model="StatusSelection.checked1" clearable size="mini" @change="newStatus">-->
<!--          <el-option v-for="item in statusList" :label="item.label" :key="item.value" :value="item.value"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
    <cs-filter-query ref="csFilterQueryRef" :options="filterQueryOptions" @change="handleChangeFilter">
    </cs-filter-query>
    <!--    表格列-->
    <div class="curd-table">
      <div class="tab-header clearfix">
        <div class="tab-header-left">
          <el-button size="mini" type="primary" @click="addTransfer">新增充值需求</el-button>
          <el-button size="mini" type="primary" @click="showTransferDetail">充值记录</el-button>
        </div>
        <div class="tab-header-right" style="margin-right: 30px">
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <el-button icon="el-icon-refresh" size="mini" circle @click="uploadAccount"></el-button>
          </el-tooltip>
        </div>
      </div>
      <div class="table-body">
        <el-table
          v-loading="loading"
          border
          :data="accountList"
          :header-cell-style="iHeaderCellStyle"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            label="序号"
            type="index"
            align="center">
          </el-table-column>
          <el-table-column
            prop="accountName"
            label="账户名称"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="platformId"
            label="账户ID"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="customerFullName"
            label="客户名称"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="amount"
            label="充值金额">
          </el-table-column>
          <el-table-column
            prop="platform"
            label="媒体">
          </el-table-column>
          <el-table-column
            prop="accountOperator"
            label="账户运营人"
            width="90">
          </el-table-column>
          <el-table-column
            prop="ttOneAgentTenantName"
            label="代理">
          </el-table-column>
          <el-table-column
            prop="level"
            label="优先级"
            :formatter="formatterLevel">
          </el-table-column>
          <el-table-column
            prop="status"
            label="充值状态"
            :formatter="formatterStatus">
          </el-table-column>
<!--          <el-table-column-->
<!--            prop="requirementName"-->
<!--            label="需求人"-->
<!--            :formatter="formatterUserName">-->
<!--          </el-table-column>-->
          <el-table-column
            prop="refusalCause"
            label="拒绝原因"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="auditUserName"
            label="审批人">
          </el-table-column>
          <el-table-column
            prop="auditTime"
            label="审批时间"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="申请时间"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="createUser"
            label="创建人"
            :formatter="formatterUserName">
          </el-table-column>
          <el-table-column
            label="操作" width="130" align="center" fixed="right">
            <template v-slot="{row}">
              <el-tooltip content="查看" placement="top">
                <el-button size="small" icon="el-icon-view" type="text" @click="showDetail(row)"></el-button>
              </el-tooltip>
              <el-tooltip content="编辑" placement="top">
                <el-button size="small" icon="el-icon-edit" type="text" @click="editDetail(row)" :disabled="row.status!==4"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="复制" placement="top">
                <el-button size="small" icon="el-icon-copy-document" type="text" @click="copyDetail(row)"
                           ></el-button>
              </el-tooltip>
              <!--<el-tooltip class="item" effect="dark" content="删除" placement="top">-->
              <!--  <el-button size="small" icon="el-icon-delete" type="text"></el-button>-->
              <!--</el-tooltip>-->
            </template>
          </el-table-column>
        </el-table>

        <el-dialog
          title="修改充值金额"
          :visible.sync="editTransferAccount"
          width="30%"
          append-to-body>
          <span> {{ currentAccount }} \ {{ currentAccountId }}</span>
<!--          <div>-->
<!--            充值金额：-->
<!--          </div>-->
          <el-form style="margin-top: 40px"  label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="充值金额:">
                  <el-input  type="number" v-model="currentAmount"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="优先级:">
                  <el-select v-model="currentLevel" placeholder="请选择">
                    <el-option
                      v-for="item in levelList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editTransferAccount = false">取 消</el-button>
            <el-button type="primary" @click="reviseAmount">确 定</el-button>
          </span>
        </el-dialog>

      </div>
      <div class="bottom-page clearfix">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <!--   新增 -->
    <el-drawer
      :title="isEdit?'新增充值需求':'充值记录'"
      size="80%"
      :visible.sync="addDrawerSwitch"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      :wrapperClosable="false"
      @close="closeMoneyForm"
    >
      <el-divider></el-divider>
      <cs-drawer-container>
        <div class="add-money-box">
          <el-form ref="kpiForm" label-position="top" :model="moneyForm" label-width="80px">
            <el-form-item>
              <el-table
                :data="moneyForm.request"
                style="width: 100%"
                ref="moneyTable"
              >
                <el-table-column
                  prop="platformId"
                  :show-overflow-tooltip="true"
                  width="200"
                  label="账户ID">
                  <template v-slot="{row, column, $index}" v-if="isEdit">
                    <el-select :ref="'accountId'+$index" v-if="row.accountIdSelectVisible" size="mini"
                               v-model="row.platformId" placeholder="请选择" filterable
                               @change="filterAccountsInfo($event,row)" @blur="handleBlurSelect($index,'accountId')">
                      <el-option
                        v-for="(item,index) in selectAccountList"
                        :key="index"
                        :label="item.platformId+'->'+item.name"
                        :value="item.platformId">
                      </el-option>
                    </el-select>
                    <el-button v-else :type="row.platformId?'primary':'warning'" size="mini" plain
                               @click="showEditItem($index,'accountId')">
                      {{ row.platformId !== '' ? row.platformId : '请选择账户ID' }}
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="accountName"
                  :show-overflow-tooltip="true"
                  label="账户名称">
                </el-table-column>
                <el-table-column
                  prop="customerFullName"
                  :show-overflow-tooltip="true"
                  label="客户名称">
                </el-table-column>
                <el-table-column
                  v-if="isEdit"
                  prop="platform"
                  label="媒体">
                </el-table-column>
                <el-table-column
                  v-if="isEdit"
                  prop="accountOperator"
                  label="账户运营人">
                </el-table-column>
                <el-table-column
                  prop="amount"
                  :label="isEdit?'充值金额': '金额变动'">
                  <template v-slot="{row}" v-if="isEdit">
                    <el-input size="mini" oninput="if(value<0)value=0"
                              v-model="row.amount" type="number"></el-input>
                  </template>
                  <template v-slot="{row}" v-else>
                    {{ row.type === 'RECHARGE' ? `+${row.amount}` : `-${row.amount}` }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="level"
                  label="优先级"
                  :formatter="formatterLevel"
                  v-if="isEdit">
                  <template v-slot="{row}" v-if="isEdit">
                    <el-select size="mini" v-model="row.level" placeholder="请选择" filterable>
                      <el-option
                        v-for="item in levelList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
<!--                <el-table-column-->
<!--                  prop="requirementName"-->
<!--                  label="需求人"-->
<!--                  v-if="isEdit"-->
<!--                  :formatter="formatterUserName">-->
<!--                  <template v-slot="{row, column, $index}" v-if="isEdit">-->
<!--                    <el-select :ref="'requirementName'+$index" v-if="row.requirementNameSelectVisible" size="mini"-->
<!--                               v-model="row.requirementName" placeholder="请选择" filterable-->
<!--                               @blur="handleBlurSelect($index,'requirementName')">-->
<!--                      <el-option-->
<!--                        v-for="item in allUserList"-->
<!--                        :key="item.value"-->
<!--                        :label="item.label"-->
<!--                        :value="item.value">-->
<!--                      </el-option>-->
<!--                    </el-select>-->
<!--                    <el-button v-else :type="row.requirementName?'primary':'warning'" size="mini" plain-->
<!--                               @click="showEditItem($index,'requirementName')">-->
<!--                      {{ row.requirementName !== '' ? formatterUserName(null, null, row.requirementName) : '请选择账户ID' }}-->
<!--                    </el-button>-->
<!--                  </template>-->
<!--                </el-table-column>-->
                <el-table-column
                  v-if="!isEdit"
                  prop="status"
                  label="状态"
                  :formatter="formatterStatusMix">
                </el-table-column>
                <el-table-column
                  prop="auditUserName"
                  v-if="!isEdit"
                  :show-overflow-tooltip="true"
                  label="审批人">
                </el-table-column>
                <el-table-column
                  prop="auditTime"
                  label="审批时间"
                  v-if="!isEdit"
                  :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                  v-if="isEdit"
                  width="50">
                  <template v-slot="{row, column, $index}">
                    <i class="el-icon-delete" style="cursor: pointer" @click="removeMoneyCheck($index, row)"></i>
                  </template>
                </el-table-column>
              </el-table>
              <el-link type="primary" @click="addMoneyCheck" v-if="isEdit">+ 新增充值账户</el-link>
            </el-form-item>
          </el-form>
        </div>
        <template v-slot:bottom>
          <el-button :disabled="btnLoading" type="primary" v-if="isEdit" size="mini" @click="saveRequest">保存</el-button>
          <el-button size="mini" @click="addDrawerSwitch = false">取消</el-button>
        </template>
      </cs-drawer-container>
    </el-drawer>
    <!--    查看-->
    <el-drawer
      title="查看"
      size="600px"
      :visible.sync="detailDrawer"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      :wrapperClosable="false"
    >
      <el-divider></el-divider>
      <cs-drawer-container>
        <div class="account-detail-drawer">
          <el-descriptions :column="2">
            <el-descriptions-item label="账户ID">{{ currentAccountObj.platformId }}</el-descriptions-item>
            <el-descriptions-item label="账户名">{{ currentAccountObj.accountName }}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{ currentAccountObj.customerFullName }}</el-descriptions-item>
            <el-descriptions-item label="媒体">{{ currentAccountObj.platform }}</el-descriptions-item>
            <el-descriptions-item label="账户运营人">{{ currentAccountObj.accountOperator }}</el-descriptions-item>
            <el-descriptions-item label="充值金额">{{ currentAccountObj.amount }}</el-descriptions-item>
            <el-descriptions-item label="代理">{{ currentAccountObj.ttOneAgentTenantName }}</el-descriptions-item>
            <el-descriptions-item label="优先级">
              {{ currentAccountObj.level === undefined ? '' : formatterLevel(null, null, currentAccountObj.level) }}
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              {{ currentAccountObj.status === undefined ? '' : findStatus(currentAccountObj.status) }}
            </el-descriptions-item>
<!--            <el-descriptions-item label="需求人">{{-->
<!--                currentAccountObj.requirementName === undefined ? '' : formatterUserName(null, null, currentAccountObj.requirementName)-->
<!--              }}-->
<!--            </el-descriptions-item>-->
            <el-descriptions-item label="拒绝原因">{{ currentAccountObj.refusalCause }}</el-descriptions-item>
            <el-descriptions-item label="审批人">{{ currentAccountObj.auditUserName }}</el-descriptions-item>
            <el-descriptions-item label="审批时间">{{ currentAccountObj.auditTime }}</el-descriptions-item>
            <el-descriptions-item label="创建人">{{
                currentAccountObj.createUser === undefined ? '' : formatterUserName(null, null, currentAccountObj.createUser)
              }}
            </el-descriptions-item>
            <el-descriptions-item label="申请时间">{{ currentAccountObj.createTime }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <template v-slot:bottom>
          <el-button size="mini" @click="detailDrawer = false">关闭</el-button>
        </template>
      </cs-drawer-container>
    </el-drawer>
    <!--    编辑-->
    <!--    充值记录-->
    <el-drawer
      title="充值记录"
      size="80%"
      :visible.sync="detailDrawer1"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      :wrapperClosable="false"
    >
      <el-divider></el-divider>
      <cs-drawer-container>
        <div class="account-detail-drawer">
          <el-form label-position="top" label-width="80px" inline>
            <el-form-item>
              <el-date-picker
                size="mini"
                v-model="queryDate"
                type="daterange"
                align="right"
                unlink-panels
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="getAccountListByQuery"
              >
              </el-date-picker>

            </el-form-item>
            <el-form-item>
              <el-input size="mini" v-model="queryInput" placeholder="账户ID" @change="getAccountListByQuery"></el-input>
            </el-form-item>
          </el-form>
          <el-table
            v-loading="recordLoading"
            :data="rAccountList"
            style="width: 100%"
            border
            :span-method="spanMethod"
          >
            <el-table-column
              prop="updateTime"
              label="日期"
              width="100">
              <template v-slot="{row}">
                {{ row.updateTime.substring(0,10)  }}
              </template>
            </el-table-column>
            <el-table-column
              prop="platformId"
              :show-overflow-tooltip="true"
              label="账户ID">
            </el-table-column>
            <el-table-column
              prop="accountName"
              :show-overflow-tooltip="true"
              label="账户名称">
            </el-table-column>
            <el-table-column
              prop="customerFullName"
              :show-overflow-tooltip="true"
              label="客户名称">
            </el-table-column>
            <el-table-column
              prop="accountOperator"
              :show-overflow-tooltip="true"
              label="账户运营人">
            </el-table-column>
            <!--<el-table-column-->
            <!--  prop="limits"-->
            <!--  label="账户余额">-->
            <!--</el-table-column>-->
            <el-table-column
              prop="amount"
              :show-overflow-tooltip="true"
              label="金额变动">
              <template v-slot="{row}">
                {{ row.type === 'RECHARGE' ? `+${row.amount}` : `-${row.amount}` }}
              </template>
            </el-table-column>
            <!--<el-table-column-->
            <!--  prop="level"-->
            <!--  label="优先级"-->
            <!--  :show-overflow-tooltip="true"-->
            <!--  :formatter="formatterLevel">-->
            <!--</el-table-column>-->
            <!--<el-table-column-->
            <!--  prop="requirementName"-->
            <!--  label="需求人"-->
            <!--  :show-overflow-tooltip="true"-->
            <!--  :formatter="formatterUserName">-->
            <!--</el-table-column>-->
            <el-table-column
              prop="ttOneAgentTenantName"
              :show-overflow-tooltip="true"
              label="代理">
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              :show-overflow-tooltip="true"
              :formatter="formatterStatusMix">
            </el-table-column>
            <el-table-column
              prop="auditTime"
              label="审批时间"
              :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
              prop="auditUserName"
              :show-overflow-tooltip="true"
              label="审批人">
            </el-table-column>
            <!--<el-table-column-->
            <!--  prop="createTime"-->
            <!--  label="申请时间"-->
            <!--  :show-overflow-tooltip="true">-->
            <!--</el-table-column>-->
            <!--<el-table-column-->
            <!--  prop="createUserName"-->
            <!--  :show-overflow-tooltip="true"-->
            <!--  label="创建人">-->
            <!--</el-table-column>-->
          </el-table>
        </div>
        <template v-slot:bottom>
          <el-button size="mini" @click="detailDrawer1 = false">关闭</el-button>
        </template>
      </cs-drawer-container>
    </el-drawer>
  </basic-container>
</template>

<script>
import CsDrawerContainer from "@/components/CsDrawerContainer/CsDrawerContainer";
import CsFilterQuery from '@/components/CsFilterQuery/CsFilterQuery'
import {
  getAccountListByUpdateTime,
  getAccountRechargeRequirement, getRecordById,
  getSelectAccountfor, getTTAccountBalance,
  saveRequirementByBatch,updateAmountAndLevel
} from "@/api/accountOrTransfer/transfer";
import {getAllUser} from "@/api/user";
import {mapState} from "vuex";
import _ from "lodash";

export default {
  name: "AccountForTransfer",
  components: {
    CsDrawerContainer,
    CsFilterQuery
  },
  data() {
    return {
      StatusSelection:{
        checked1: "",
      },
      loading: false,
      query: {},
      page: {
        current: 1,
        size: 10,
      },
      total: 0,
      // 新增定时报告弹窗
      addDrawerSwitch: false,
      // 弹窗表头
      drawerTitle: '',
      // 账户列表
      accountList: [],
      //账户列表固定
      accountListFixed: [],
      // 查看抽屉
      detailDrawer: false,
      //查看充值记录
      detailDrawer1:false,
      queryDate: null,
      queryInput: '',
      recordLoading: false,
      rAccountList: [],
      editTransferAccount:false,
      currentAmount:'',
      pickerOptions: {},
      currentAccount:'',
      currentAccountId:'',
      currentLevel:'',
      currentStatus:'',
      // 当前账户
      currentAccountObj: {},
      moneyForm: {
        request: []
      },
      // 所有可选择的账户列表
      selectAccountList: [],
      selectAccountListFixed: [],
      excludeSelection: [],
      // 优先级列表
      levelList: [
        {label: '马上', value: 2},
        {label: '当天', value: 1},
        {label: '一般', value: 0},
      ],
      statusList: [
        {
          label: "新需求",
          value: 0
        },
        {
          label: "充值中",
          value: 1
        },
        {
          label: "充值成功",
          value: 2
        }, {
          label: "充值失败",
          value: 3
        },{
          label:"代理拒绝",
          value:4
        }
      ],
      // 所有账户
      allUserList: [],
      // 所有客户
      customerList: [],
      isEdit: false,
      btnLoading: false
    }
  },
  watch: {},
  filters: {},
  computed: {
    ...mapState({
      currentUserId: state => state.user.userInfo.user_id // 当前账户的ID
    }),
    // 筛选组件配置
    filterQueryOptions() {
      return [{
        value: 'customerFullName',
        label: '客户'
      }, {
        value: 'amount',
        label: '充值金额',
      }, {
        value: 'level',
        label: '优先级',
        children: this.levelList
      }, {
        value: 'status',
        label: '充值状态',
        children: this.statusList
      }];
    },
  },
  created() {
    this.getAccountList()
    this.getSelectAccountList()
    this.getAllUserList()
  },
  methods: {
    newStatus(){
      // this.query.status = this.StatusSelection.checked1
      // this.query=this.checked1 ? {status:0} : ''
      this.getAccountList()
    },
    handleChangeFilter(val) {
      if (val.amount !== undefined && isNaN(val.amount)) return
      this.query = val
      // this.query.status = this.StatusSelection.checked1
      this.page.current = 1
      this.getAccountList()
    },

    iHeaderCellStyle() {
      return {
        color: '#101010',
        backgroundColor: '#F2F2F2'
      }
    },
    handleSizeChange(val) {
      this.page.size = val
      this.getAccountList()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.getAccountList()
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => item.id);
    },
    // 新增充值
    addTransfer() {
      this.isEdit = true
      this.moneyForm.request = []
      this.addMoneyCheck()
      this.addDrawerSwitch = true
    },
    // 获取账户列表
    async getAccountList() {
      this.loading = true
      // this.query.status = this.StatusSelection.checked1
      const {data: res} = await getAccountRechargeRequirement({
        ...this.page,
        ...this.query
      }).finally(() => {
        this.loading = false
      })
      this.total = res.data.total
      this.accountList = res.data.records
      this.accountListFixed = res.data.records
    },
    //查看充值记录
    showTransferDetail(){
      this.detailDrawer1 = true
      this.getAccountListByQuery()
    },
    async getAccountListByQuery() {
      this.recordLoading = true
      const {data: res} = await getAccountListByUpdateTime({
        startDate: this.queryDate ? this.queryDate[0] + ' 00:00:00' : null,
        endDate: this.queryDate ? this.queryDate[1] + ' 00:00:00' : null,
        platformId: this.queryInput
      }).finally(() => {
        this.recordLoading = false
      })
      this.rAccountList = res.data
    },
    // 合并单元格
    spanMethod({row, column, rowIndex, columnIndex}) {
      const same = this.rAccountList.filter(item => item.updateTime === row.updateTime)
      if (same.length >= 2) {
        same.forEach((item, index) => {
          if (!item.hasOwnProperty('row')) {
            if (index === 0) {
              item.row = same.length
            } else {
              item.row = 0
            }
          }
        })
      }
      if (columnIndex === 0) {
        if (row.hasOwnProperty('row')) {
          return {
            rowspan: row.row,
            colspan: 1
          }
        }
      }
    },
    // 查看详情
    showDetail(row) {
      this.currentAccountObj = row
      this.detailDrawer = true
    },
    editDetail(row){
      this.editTransferAccount=true
      this.currentAccount=row.accountName
      this.currentAccountId=row.id
      this.currentAmount=row.amount
      this.currentStatus=row.status
      this.currentLevel=row.level
    },
    closeMoneyForm(){
      this.moneyForm.request = []
      this.excludeSelection = []
      this.selectAccountList = this.selectAccountListFixed
      this.addDrawerSwitch = false
    },
    async copyDetail(row){
      console.log('row',row)
      let mf = _.cloneDeep(row)
      this.addDrawerSwitch=true
      this.isEdit = true
      const account = this.selectAccountList.find(item => item.platformId === mf.platformId)
      this.excludeSelection.push(mf.platformId)
      this.selectAccountList = this.selectAccountListFixed
        .filter(item =>  !this.excludeSelection.includes(item.platformId))
      let param = {
        platformId: account.platformId,
        accountName: account.name,
        customerFullName: account.customerFullName,
        platform: account.platform,
        accountOperator: account.operatorName,
        amount: mf.amount,
        level: 0,
        limits: 0,
        requirementName: this.currentUserId,
        accountIdSelectVisible: false,
        requirementNameSelectVisible: false
      }
      this.moneyForm.request.push(param)
      const {data: {data}} = await getTTAccountBalance(mf.platformId)
      param.limits = data
    },
  async  reviseAmount(){
      const {data:res} = await updateAmountAndLevel({id:this.currentAccountId,level:this.currentLevel,status:this.currentStatus,amount:this.currentAmount})
    if(res.code === 200){
      this.$message.success('修改成功')
      this.getAccountList()
      this.editTransferAccount=false
    }

    },
    // 添加指标
    addMoneyCheck() {
      this.moneyForm.request.push({
        platformId: '',
        accountName: '',
        customerFullName: '',
        platform: '',
        accountOperator: '',
        amount: '',
        level: 0,
        requirementName: this.currentUserId,
        accountIdSelectVisible: false,
        requirementNameSelectVisible: false
      })
    },
    // 移除指标
    removeMoneyCheck(index, row) {
      this.excludeSelection = this.excludeSelection.filter(item => row.platformId !== item)
      this.selectAccountList = this.selectAccountListFixed
        .filter(item => !this.excludeSelection.includes(item.platformId))
      this.moneyForm.request.splice(index, 1)
    },
    // 获取tt账户
    async getSelectAccountList() {
      const {data: res} = await getSelectAccountfor()
      this.selectAccountList = res.data
      this.selectAccountListFixed = res.data
    },
    // 获取账户名称
    async filterAccountsInfo(event, row) {
      const account = this.selectAccountList.find(item => item.platformId === event)
      this.excludeSelection.push(row.platformId)
      this.selectAccountList = this.selectAccountListFixed
        .filter(item =>  !this.excludeSelection.includes(item.platformId))
      // const {data: {data}} = await getTTAccountBalance(row.platformId)
      row.accountName = account.name
      row.customerFullName = account.customerFullName
      row.platform = account.platform
      row.accountOperator = account.operatorName
      // row.limits = data
    },
    async getAllUserList() {
      const res = await getAllUser({statusList: '0,1,2', isAll: true})
      this.allUserList = res.data.data.map(item => {
        return {
          label: item.realName,
          value: item.id
        }
      })
    },
    // 保存需求
    async saveRequest() {
      if (this.moneyForm.request.length === 0) return
      if (this.moneyForm.request.some(item => {
        return item.platformId === '' || item.amount === '' || item.level === ''
      })) return this.$message.warning('请完善表单')
      if (this.moneyForm.request.some(item => {
        return item.amount < 10
      })) return this.$message.warning('充值金额必须大于10')
      this.btnLoading = true
      const {data: res} = await saveRequirementByBatch(this.moneyForm.request).finally(() => {
        this.btnLoading = false
      })
      // console.log(res)
      if (res.code !== 200) return
      this.$message.success('保存成功')
      this.closeMoneyForm()
      this.getAccountList()
    },
    // 查看充值记录
    async getRecordById(row) {
      this.isEdit = false
      const {data: res} = await getRecordById(row.platformId)
      // console.log(res.data)
      if (res.code !== 200) return
      this.moneyForm.request = res.data
      this.addDrawerSwitch = true
    },
    formatterStatus(row, column, cellValue, index) {
      const temp = this.statusList.find(item => item.value === cellValue)
      if (temp === undefined) {
        return ''
      } else {
        return temp.label
      }
    },
    findStatus(val) {
      try {
        return this.statusList.find(item => item.value === val)['label']
      } catch (e) {
        return val
      }
    },
    formatterStatusMix(row) {
      if (row.type === 'RECHARGE') {
        switch (row.rechargeStatus) {
          case 0:
            return '新需求'
          case 1:
            return '充值中'
          case 2:
            return '充值成功'
          case 3:
            return '充值失败'
          case 4:
            return '代理拒绝'
          default:
            return '未知参数'
        }
      } else {
        switch (row.refundStatus) {
          case 0:
            return '创建扣款'
          case 1:
            return '充值中'
          case 2:
            return '扣款成功'
          case 3:
            return '扣款失败'
          default:
            return '未知参数'
        }
      }
    },
    // 账户名称
    formatterUserName(row, column, cellValue, index) {
      const temp = this.allUserList.find(item => item.value === cellValue)
      if (temp === undefined) {
        return ''
      } else {
        return temp.label
      }
    },
    // 有优先级
    formatterLevel(row, column, cellValue, index) {
      const temp = this.levelList.find(item => item.value === cellValue)
      if (temp === undefined) {
        return ''
      } else {
        return temp.label
      }
    },
    // 展示选择修改框
    showEditItem(index, type) {
      switch (type) {
        case 'accountId':
          this.moneyForm.request[index].accountIdSelectVisible = true
          this.$nextTick(() => {
            this.$refs['accountId' + index].toggleMenu()
            this.$refs['accountId' + index].focus()
          })
          break;
        case 'requirementName':
          this.moneyForm.request[index].requirementNameSelectVisible = true
          this.$nextTick(() => {
            this.$refs['requirementName' + index].toggleMenu()
            this.$refs['requirementName' + index].focus()
          })
          break;
      }
    },
    // 选择器失去焦点事件
    handleBlurSelect(index, type) {
      setTimeout(() => {
        switch (type) {
          case 'accountId':
            this.moneyForm.request[index].accountIdSelectVisible = false
            break;
          case 'requirementName':
            this.moneyForm.request[index].requirementNameSelectVisible = false
            break;
        }
      }, 500)
    },
    async uploadAccount() {
      this.loading = true
      await this.getAccountList().finally(() => this.loading = false)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__header {
  border-bottom: unset;
}

.curd-table {
  .tab-header {
    font-size: 14px;
    margin-bottom: 15px;

    .tab-header-left {
      float: left;

      & > * {
        margin-right: 15px;
      }
    }

    .tab-header-right {
      float: right;
    }
  }

  .bottom-page {
    margin-top: 15px;
    margin-bottom: 50px;

    .el-pagination {
      float: right;
    }
  }
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.cs-button {
  cursor: pointer;
  font-size: 16px;
}

.active {
  color: #409EFF;
}

.disabled {
  cursor: default !important;
}

.account-detail-drawer {
  padding: 0 20px;
}

.add-money-box {
  padding: 0 15px;
}
</style>
